<template>
    <div :style="{height: scrollerHeight}" class="container">
      <Form :model="loginForm" :rules="loginRules"  ref="loginForm">
          <Row style="height: 100%;width: 100%">
            <!-- 左边 -->
            <Col span="4" style="text-align: right;margin-top: 66px;">
              <Row style="margin: 18px" v-show="status == 2 || status == 0">
                <Button type="primary" @click="openWithdrawMoney" :disabled="status == 1">取 款</Button>
              </Row>
              <Row style="margin: 18px" v-show="status == 2 || status == 0">
                <Button type="primary" @click="openDeposit" :disabled="status == 1">存 款</Button>
              </Row>
              <Row style="margin: 18px" v-show="status == 2 || status == 0" >
                <Button type="primary" @click="openTransferAccounts" :disabled="status == 1">转 账</Button>
              </Row>
              <Row style="margin: 18px" v-show="status == 9 || status == 4 || status == 5 || status == 6 || status == 8 ">
                <Button type="primary" @click="backStatus" :disabled="status == 1">返回</Button>
              </Row>
            </Col>
            <!-- 中间-->
            <Col span="5" class="middle" :style="{height: middleHeight}">
                <div class="title" style="margin: 0px;width: 100%;height: 60px;float: left;background: #99a9bf;">
                  <h2 style="margin-left: 30px;" v-show="status != 88">中国建设银行</h2>
                </div>
              <!-- 显示屏-->
                <div class="middleContainer">
                  <!-- 开机关机加载效果-->
                  <Spin fix v-if="startShow">
                    <Icon type="ios-loading" size="large" class="demo-spin-icon-load"></Icon>
                    <div>{{status != 88 ? '正在开机' : '正在关机'}}...</div>
                  </Spin>

                  <h3 v-show="status == 1" style="color: chocolate;font-size: 18px">欢迎使用，请插卡</h3>
                  <h3 v-show="status == 2 || status == 0" style="color: #2b7ED1;font-size: 18px">您好！请您选择需要的服务</h3>
                  <h3 v-show="message != '' && status != 88" style="color: firebrick;font-size: 18px">{{message}}</h3>
                  <h3 v-show="success != '' && status != 88" style="color: royalblue;font-size: 18px">{{success}}</h3>

                  <div style="width: 100%;height: 100%;text-align: center">


                    <FormItem v-show="status == 4">
                      <label>取款金额：</label>
                      <InputNumber  v-model="num"/>
                    </FormItem>
                    <FormItem v-show="status == 5" >
                      <label>存款金额：</label>
                      <InputNumber  v-model="num"/>
                    </FormItem>

                    <FormItem v-show="status == 6 && step == 1">
                      <label>转账给对方的卡号：</label>
                      <Input type="text" v-model="loginForm.otherCard" style="width: 30%"/>
                    </FormItem>
                    <FormItem v-show="status == 6 && step == 2">
                      <label>转账金额：</label>
                      <InputNumber v-model="loginForm.transferMoney"/>
                    </FormItem>


                    <FormItem v-show="status == 8 && step == 1">
                      <label>旧密码：</label>
                      <Input type="password" v-model="loginForm.password" style="width: 30%"/>
                    </FormItem>
                    <FormItem v-show="status == 8 && step == 2">
                      <label>新密码：</label>
                      <Input type="password" v-model="loginForm.secondPassword" style="width: 30%"/>
                    </FormItem>
                    <FormItem v-show="status == 8 && step == 3">
                      <label>确认新密码：</label>
                      <Input type="password" v-model="loginForm.newPassword" style="width: 30%"/>
                    </FormItem>

                    <List item-layout="vertical" v-show="status == 9" size="small">
                      <ListItem v-show="status == 9" v-for="item in records" :key="item.id">
                        交易时间：{{item.transactionDate}}  金额：{{item.money}}
                      </ListItem>
                    </List>

                  </div>

                </div>
              <!--  按钮屏-->
              <div class="numContainer">
                <Col span="4" style="margin-top: 18px;margin-left: 10px;">
                    <Button disabled style="width: 100px;height: 18px;margin-left: 38px;">凭条</Button>
                    <Input  v-model="receipt" disabled type="textarea" style="width: 180px;height: 150px;"/>
                    <Button v-show="printStatus == 2" @click="clearScree" style="width: 68px;height: 20px;margin-top: -120px;position: relative;margin-left: 46px;">确 认</Button>
                </Col>

                <Col span="12" style="text-align: right">
                  <Button @click="handleKey(7)">7</Button>
                  <Button @click="handleKey(8)" style="margin: 10px">8</Button>
                  <Button @click="handleKey(9)">9</Button>
                  <Button @click="handleKey(33)" style="width: 68px;margin-left: 10px">取 消</Button>
                </Col>

                <Col span="2" style="text-align: right">
                  <Button @click="openLogin()" :disabled="status != 1" style="width: 88px;height: 38px;margin-left: 38px;margin-top: 8px">{{status == 1 ? '插卡': '已插卡'}}</Button>
<!--                  <Button v-show="status != 1 && status != 88" disabled style="width: 88px;height: 38px;margin-left: 38px;margin-top: 10px">已插卡</Button>-->
                </Col>

                <Col span="12" style="text-align: right">
                  <Button @click="handleKey(4)">4</Button>
                  <Button @click="handleKey(5)" style="margin: 10px">5</Button>
                  <Button @click="handleKey(6)">6</Button>
                  <Button @click="handleKey(13)" style="width: 68px;margin-left: 10px;" >改 密</Button>
                </Col>


                <Col span="12" style="text-align: right">
                  <Button @click="handleKey(1)">1</Button>
                  <Button @click="handleKey(2)" style="margin: 10px">2</Button>
                  <Button @click="handleKey(3)">3</Button>
                  <Button @click="handleKey(99)" style="width: 68px;margin-left: 10px">清除</Button>
                </Col>

                <Col span="12" style="text-align: right">
                  <Button @click="handleKey(10)">*</Button>
                  <Button @click="handleKey(0)" style="margin: 10px">0</Button>
                  <Button @click="handleKey(11)">#</Button>
                  <Button @click="handleKey(66)" style="width: 68px;margin-left: 10px">确 认</Button>
                </Col>
                <Col span="2" style="text-align: right">
                  <Button v-show="status != 88" @click="handleKey(88)" style="width: 88px;height: 38px;margin-left: 38px;">关 机</Button>
                  <Button v-show="status === 88" @click="handleKey(88)" style="width: 88px;height: 38px;margin-left: 38px;">开 机</Button>
                </Col>
              </div>
            </Col>

          <!-- 右边-->
            <Col span="4" style="text-align: left;margin-left: 0px;margin-top: 66px;">
              <Row style="margin: 18px" v-show="status == 2 || status == 0" >
                <Button type="primary" @click="balanceQuery" :disabled="status == 1">余额查询</Button>
              </Row>
              <Row style="margin: 18px" v-show="status == 2 || status == 0" >
                <Button type="primary" @click="transactionQuery" :disabled="status == 1">账单查询</Button>
              </Row>
              <Row style="margin: 18px" v-show="printStatus === 1 && status != 1">
                <Button type="primary" @click="printVoucher" >打印凭条</Button>
              </Row>
              <Row style="margin: 18px" v-show="this.step > 1 && status != 88 && status != 0">
                <Button type="primary" @click="goBack" >上一步</Button>
              </Row>
              <Row style="margin: 18px" v-show="status == 2 || status == 0 || status == 9">
                <Button type="primary" @click="WithdrawCard" :disabled="status == 1">退 卡</Button>
              </Row>
            </Col>
          </Row>
      </Form>

      <!-- 插卡对话框-->
      <Modal
        title="插卡"
        v-model="modalShow"
        :loading="loading"
        @on-ok="login"
        width="300"
        class-name="vertical-center-modal">
        <Form :model="loginForm" :rules="loginRules"  ref="loginForm">
        <Row>
          <FormItem label="卡号" prop="bankCard">
            <Input type="text" v-model="loginForm.bankCard" style="width: 200px" placeholder="请输入您的卡号">卡号</Input>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="密码" prop="password">
            <Input type="password" v-model="loginForm.password" placeholder="请输入您的密码" style="width: 200px">密码</Input>
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </FormItem>
        </Row>
        </Form>
      </Modal>


      <!-- 关机对话框-->
      <Modal
        :title="atmStatus"
        v-model="mangerShow"
        :loading="mangerLoading"
        @on-ok="manger"
        width="300"
        class-name="vertical-center-modal">
        <Form :model="mangerForm" :rules="mangerRules" ref="mangerForm">
          <Row>
            <FormItem label="密码" prop="pwd">
              <Input type="password" v-model="mangerForm.pwd" placeholder="请输入管理员密码" style="width: 200px">密码</Input>
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </FormItem>
          </Row>
        </Form>
      </Modal>

    </div>
</template>

<script>
    import {Col} from "view-design";
    import crypto from 'crypto'
    import { mapGetters } from 'vuex'

    export default {
      components: { Col},

      computed: {
        ...mapGetters([
          'currentStatus',
        ]),
      },
      created(){
        const _this = this;
        // 回车键监听
        document.onkeydown = function() {
          if (_this.status == 88){
            return;
          }
          let key = window.event.keyCode;
          if (key == 13) {
            if (_this.status == 1){
              _this.login()
              // 清除提示
              setTimeout(() => {
                _this.clearScree()
              }, 3000)
            }
          }
          return;
        }

      },

      computed: {
        // 滚动区高度
        // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)- 46 - 50
        scrollerHeight: function() {
          return (window.innerHeight - 30) + 'px';
        },
        middleHeight(){
          return (window.innerHeight * 0.7) + 'px';
        }
      },
      data(){
          return{
            loginForm:{
              bankCard:this.$store.getters.bankCard,
              password:"",
              otherCard:0,
              transferMoney:0,
              secondPassword: "",
              newPassword: "",
            },
            mangerForm:{
              pwd:""
            },
            mangerRules:{
              pwd: [
                { required: true, message: '请输入管理员密码', trigger: 'blur' },
                // { type: 'string', min: 3, message: '密码最少3位', trigger: 'blur' }
              ]
            },
            loginRules:{
              bankCard: [
                { required: true, message: '请输入卡号', trigger: 'blur' },
                { type: 'string', min: 6, max: 10,  message: '请输入正确的卡号', trigger: 'blur' }
                // { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
              ],
              otherCard: [
                { required: true, message: '请输入转账对方卡号', trigger: 'blur' },
                { type: 'number', min: 6, max: 10, message: '请输入正确的卡号', trigger: 'blur' }
              ],
              transferMoney: [
                { required: true, message: '请输入转账金额', trigger: 'blur' },
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { type: 'string', min: 3, message: '密码最少3位', trigger: 'blur' }
              ]
            },
            status:this.$store.getters.status,// 1未插卡，2已插卡，/**3查询交易记录*/，4取款，5存款，6转账, 7 余额查询,8修改密码,9账单查询,0 交易结束待打印凭条
            printStatus:0,   // 打印凭条状态 0 不可打印 1 待打印 2 已打印
            receipt:'',  // 凭条内容
            step:1,   // 步骤
            num:0,  // 按数字键
            numString:"",  // 按的数字键字符串
            money:0,
            message:"",
            success:"", // 操作成功后的信息
            records:[],   // 交易记录（账单）
            modalShow:false, // 是否显示插卡对话框
            loading:true,
            mangerShow:false,  // 是否显示开机对话框
            mangerLoading:true,
            atmStatus:"开机",  // atm状态（开机 or 关机）
            startShow:false,  // 开关机加载效果
            flag:0,  // 是否打印凭据 1打印 0 没有

          }
        },
      methods:{
        handleKey(n){
          switch (n) {
            // 数字键
            case 0:
            case 1:
            case 2:
            case 3:
            case 4:
            case 5:
            case 6:
            case 7:
            case 8:
            case 9:
              if (this.status == 4 || this.status == 5){ // 数字键
                this.numString = this.numString + n;

                this.num = parseInt(this.numString)
              }else if (this.status == 6 && this.step == 2){// 转账输入转账金额
                this.numString = this.numString + n;

                this.loginForm.transferMoney = parseInt(this.numString)
              }else if (this.status == 6 && this.step == 1){ // 转账输入卡号
                this.numString = this.numString + n;

                this.loginForm.otherCard = parseInt(this.numString)
              }else if (this.status == 8){// 修改密码
                if (this.step == 1){
                  this.numString = this.numString + n;

                  this.loginForm.password = this.numString;
                } else if (this.step == 2){
                  this.numString = this.numString + n;

                  this.loginForm.secondPassword = this.numString;
                } else if (this.step == 3){
                  this.numString = this.numString + n;

                  this.loginForm.newPassword = this.numString;
                }
              }
              break;

            // 确认键
            case 66:
              if (this.status === 1 || this.status === 2){

                break
              }

              this.message = ""
              this.success = ""
              if (this.num === 0 && this.status != 6 && this.status != 8){
                this.message = "请输入金额或选择金额"

                break;
              }
              if (this.status == 4){ // 取款
                this.withdrawMoney(); // 执行取款
              }else if (this.status == 5){// 存款
                this.deposit();
              }else if(this.status == 6){// 转账
                this.numString = "" // 清空

                if (this.loginForm.otherCard == 0 || this.loginForm.otherCard === 0 || this.loginForm.otherCard === ""){
                  this.message = "请输入转账对方卡号"
                  break;
                }
                if (this.step == 2){// 输入转账金额
                  if (this.loginForm.transferMoney != "" && this.loginForm.transferMoney != 0){
                    this.num = this.loginForm.transferMoney;
                  } else {
                    this.message = "请输入转账金额"
                    break;
                  }
                }else if (this.step == 1){ // 输入卡号
                  if(this.loginForm.otherCard != "" && this.loginForm.otherCard != 0){
                    this.step = 2
                    break;
                  }
                }

                this.limitLen(this.num, '')

                this.transferAccounts()
              }else if (this.status == 8){// 修改密码
                this.numString = "" // 清空

                if (this.step == 2){ // 输入新密码
                  if(this.loginForm.secondPassword != ""){
                    this.step = 3
                    break;
                  }else {
                    this.message = "请输入新密码"
                    break;
                  }
                }else if (this.step == 3){ // 输入确认密码
                  if(this.loginForm.newPassword != ""){
                    if (this.loginForm.secondPassword === this.loginForm.newPassword){
                      this.updatePassword()
                    } else {
                      this.message = "两次密码不一样！请重新输入"
                      break
                    }
                  }else {
                    this.message = "请确认新密码"
                    break
                  }
                }

                if (this.loginForm.password === ""){
                  this.message = "请输入旧密码"
                  break;
                }
                if (this.loginForm.password != "" ){
                  this.step = 2;
                }

                // this.updatePassword()
              }

              break;
            case 13: // 修改密码
              if(this.status != 2){
                break
              }

              if (this.loginForm.bankCard != 0){
                this.openPassword()
              }
            case 99: // 清除输入
              if (this.status == 4 || this.status == 5 || this.status == 6){
                this.num = 0;
                this.loginForm.transferMoney = 0
                this.numString = ""
              }else if (this.status == 8){
                if (this.step == 1){
                  this.loginForm.password = ""
                } else if (this.step == 2){
                  this.loginForm.secondPassword = ""
                }else if (this.step == 3){
                  this.loginForm.newPassword = ""
                }
              }
              break;
            case 88: // 关机
              this.openManger()

              break;
            case 33: // 取消
              if(this.status === 1){
                break
              }
              this.clearScree()
              this.loginForm.newPassword = ""
              this.loginForm.secondPassword = ""
              this.$store.dispatch("setStatus", 2);
              this.status = 2;
              break
          }

        },
        // 打开插卡界面
        openLogin(){
          this.$store.dispatch("userLogin", 0); // 清空卡号
          this.loginForm.bankCard = "";
          this.loginForm.password = "";
          this.modalShow = true;
        },
        // 打开开机界面
        openManger(){

          if (this.status != 88){
            this.atmStatus = "关机";
          } else {
            this.atmStatus = "开机";
          }

          this.mangerForm.pwd = ""
          this.mangerShow = true

        },
        // 开机 or 关机
        manger(){
          this.$refs.mangerForm.validate((valid) => {
            if (valid) {
              if (this.mangerForm.pwd === "6688") {
                if (this.status != 88){
                  this.$store.dispatch("setStatus", 88);
                  this.status = 88;
                } else {
                  this.$store.dispatch("setStatus", 1);
                  this.status = 1;
                }
                this.mangerShow = false
                this.startShow = true

                setTimeout(() => {
                  this.startShow = false
                }, 2000)

                // setTimeout(() => {
                //   this.$Spin.hide();
                // }, 3000);
              } else {
                setTimeout(() => {
                  this.mangerLoading = false
                  this.$nextTick(() => {
                    this.mangerLoading = true
                  })
                }, 500)
                this.$Message.error("密码错误！")
              }

              }else {
               setTimeout(() => {
                this.mangerLoading = false
                this.$nextTick(() => {
                  this.mangerLoading = true
                })
              }, 500)
              }
            })
        },

        // 显示取款界面
        openWithdrawMoney(){
          this.$store.dispatch("setStatus", 4)
          this.status = 4;
          this.clearScree() // 清空
        },
        // 取款
        withdrawMoney(){
          this.limitLen(this.num, '')

          this.money = this.num
          if (this.money <= 0){
            this.message = "请输入取款金额";
            return;
          }

          let params ={
            bankCard: parseInt(this.loginForm.bankCard),
            amount:this.money,
            flag:this.flag,
          }

          this.http.post("user/take",params).then(res => {
            this.message = res.data.message;
          })

          // 待打印凭条
          this.printStatus = 1
          this.transactionFinish()

        },
        // 显示存款界面
        openDeposit(){
          this.$store.dispatch("setStatus", 5)
          this.status = 5;

          this.clearScree() // 清空
        },
        deposit(){   // 存款
          if (this.num % 100 != 0){
            this.message = "只支持面值为100元的纸币,请您重新放钞";
            return;
          }


          this.limitLen(this.num, '')
          this.money = this.num
          if (this.money <= 0){
            this.message = "请输入存款金额";
            return;
          }
          let params ={
            bankCard: parseInt(this.loginForm.bankCard),
            amount:this.money,
            flag:this.flag,
          }

          this.http.post("transaction/deposit",params).then(res =>{
            this.message = res.data.message;
          })

          // 待打印凭条
          this.printStatus = 1
          this.transactionFinish()
        },
        // 显示转账界面
        openTransferAccounts(){
          this.$store.dispatch("setStatus", 6) // 已插卡
          this.status = 6; // 已插卡

          this.clearScree() // 清空
        },
        // 转账
        transferAccounts(){
          this.limitLen(this.num, '')
          let params = {
            bankCard: parseInt(this.$store.getters.bankCard),
            flag: this.flag,
            otherCard: this.loginForm.otherCard,
            amount: this.loginForm.transferMoney
          }
          this.http.post("transaction/transfer", params).then(res => {
            if (res.data.code === 666) {
              this.success = res.data.message;

            } else {
              this.message = res.data.message;
            }
          })

          // 待打印凭条
          this.printStatus = 1
          this.transactionFinish()
        },
        // 账单查询 TODO 金额按三位分割
        transactionQuery(){
          this.clearScree() // 清空
          this.status = 9
          let params ={
            bankCard: parseInt(this.loginForm.bankCard),
            flag:this.flag,
          }
          this.http.post("transaction/record",params).then(res =>{
            if (res.data.code === 666){
              this.records = res.data.data.list;
            } else {
              this.message = res.data.message;
            }
          })
          // this.backStatus()
        },
        // 余额查询 TODO 金额按三位分割
        balanceQuery(){
          this.clearScree() // 清空
          this.status = 7;
          this.$store.dispatch("setStatus", 7)
          let params = {
            bankCard: parseInt(this.loginForm.bankCard),
            name:"",
          }
          this.http.post("user/balance", params).then(res =>{
            if (res.data.code === 666){
              this.success = "您的余额为：" + res.data.data.balance + "元";
            }else {
              this.message = res.data.message
            }
          }).catch(error =>{
            console.log("err-->", error)
          })
          this.backStatus()
        },
        // 修改密码界面
        openPassword(){
          this.clearScree();
          this.status = 8;
          this.$store.dispatch("setStatus", 8)

        },
        // 修改密码
        updatePassword(){
          this.clearScree() // 清空

          // 密码加密
          let  md5 = crypto.createHash("md5");
          md5.update(this.loginForm.newPassword) //需要加密的密码
          let password = md5.digest('hex');  //password 加密完的密码

          let  md = crypto.createHash("md5");
          md.update(this.loginForm.password) // 加密旧密码
          this.loginForm.password = md.digest('hex');

          let params = {
            bankCard: parseInt(this.loginForm.bankCard),
            password:this.loginForm.password,
            newPassword:password
          }
          this.http.post("user/password", params).then(res =>{
            if (res.data.code === 666){
              this.success = res.data.message

              this.loginForm.newPassword = ""
              this.loginForm.secondPassword = ""
              this.backStatus()

            }else {
              this.message = res.data.message
            }
          }).catch(error =>{
            console.log("err-->", error)
          })
        },
        goBack(){
          this.step = this.step - 1
        },
        limitLen(num, msg){
          if (num > 9999999999){
            if (msg == null || msg == "") {
              msg = "对不起！不能金额超过11位！"
            }
            this.message = msg
            return;
          }
        },
        // 打印凭条
        printVoucher(){
          this.clearScree() // 清空

          let params ={
            bankCard: parseInt(this.loginForm.bankCard),
            flag:this.flag,
          }
          this.http.post("transaction/print",params).then(res =>{
            if (res.data.code === 666){
              this.receipt = res.data.data.one;
              console.log("凭条--》", this.receipt)
            } else {
              this.message = res.data.message;
            }
          })
          this.message = "请取走您的凭条"
          this.printStatus = 2
        },
        WithdrawCard(){// 退卡
          this.clearScree() // 清空
          this.status = 1;
          this.$store.dispatch("removeAll") // 清空记录
        },
        backStatus(){// 状态复位
          this.num = 0
          this.numString = ""
          this.loginForm.transferMoney = 0
          this.loginForm.otherCard = 0
          this.loginForm.newPassword = ""
          this.loginForm.secondPassword = ""
          this.step = 1
          this.$store.dispatch("setStatus", 2) // 已插卡
          this.status = 2; // 已插卡

          this.printStatus = 0
        },
        transactionFinish(){  // 交易完成（当前选择的服务处理完毕）
          this.$store.dispatch("setStatus", 0)
          this.status = 0;
        },
        clearScree(){ // 清空
          this.message = ""
          this.success = ""
          this.num = 0
          this.step = 1
          this.receipt = ''

          this.printStatus = 0
        },
        login(){// 插卡实际上是登录
          this.clearScree()
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              // 密码加密
              let  md5 = crypto.createHash("md5");
              md5.update(this.loginForm.password) //需要加密的密码
              let password = md5.digest('hex');  //password 加密完的密码

              let params = {
                bankCard: parseInt(this.loginForm.bankCard),
                password: password,
              }

              this.http.post("user/login", params).then(res =>{
                if (res.data.code === 666){
                  this.backStatus()
                  // this.$store.dispatch("setStatus", 2) // 已插卡
                  // this.status = 2; // 已插卡
                  this.$store.dispatch("userLogin", parseInt(this.loginForm.bankCard)) // 保存卡号
                }else{
                  // this.message = res.data.message
                  this.$Message.error(res.data.message)
                }
              }).catch(error =>{
                console.log("error-->", error)
              })
              this.modalShow = false;
            } else {
              setTimeout(() => {
                this.loading = false
                this.$nextTick(() => {
                  this.loading = true
                })
              }, 500)
            }
          })


        },
      }
    }
</script>

<style scoped>
  /*整个容器*/
  .container{
    width: 80%;
    margin:auto;
    /*margin-top: 18px;*/
    border-style:solid ;
    border-color: #bccaff;
    /*border-color: #99a9bf;*/
    border-left-width:68px;
    border-right-width:68px;
    border-bottom-width:28px;
    border-top-width:28px;
    /*border: 18px solid #99a9bf;*/
    border-radius:8px;

  }
  /*中间的容器*/
  .middle{
    width: 66%;
    margin-top: 18px;

  }

  /*屏幕的容器*/
  .middleContainer{
    width: 100%;
    height: 58%;
    background: #99a9bf;
    float: left;text-align: center;
    border-radius:0px 0px 5px 5px;
    position: relative;
  }

  /*中间按钮的容器*/
  .numContainer{
    height: 45%;
    width: 100%;
    float: left;
    /*text-align: center;*/
    background: #99a9bf;
    margin-top:18px;
    margin-bottom: 10px;
    border-radius:5px;
  }

  .title{
    margin: 0px;
    width: 100%;
    height: 60px;
    float: left;
    background: #99a9bf;
    border-radius:5px 5px 0px 0px;
  }

  .btn{
    width: 178px;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
    line-height: 3;
    background-color: #fff;
    border-color: #dcdee2;
    overflow: visible;
    transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
    background-image: url('../assets/atm_btn.png');
  }

  开机动画
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    30%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 10px;
    position: relative;
    border: 1px solid #eee;
  }

 .backGround{
   background: url('../assets/atm.jpg') left center no-repeat;

   /*backgroundImage: "url(../assets/atm.jpg)";*/
   /*backgroundRepeat: "no-repeat";*/
   /*backgroundPosition: "center";*/
 }
</style>
